<template>
	<view class="my-index" ref="uv-back-top">
		<uv-navbar v-if="!screen" title="个人中心" leftIconSize="0px" :placeholder="true"></uv-navbar>
		<headers v-if="heads"></headers>
		<el-container>
			<asides :asideW="asideW" :aside="aside" @click="e=>asideType=e"></asides>
			<view class="my-index_content" v-if="vuex_user">
				<avatar></avatar>
				<uv-cell-group customStyle="">
					<uv-cell :title="'会员到期: '+memberAt">
						<template v-slot:value>
							<text :class="state=='未过期'?'Unexpired':'overdue'">{{state}}</text>
						</template>
					</uv-cell>
					<!-- v-if="state!='未过期'" -->
					<uv-cell :title="'会员'+coin+': '+(state=='未过期'?vuex_user.reset.toFixed(1):0)"
						:value="'积分: '+ Math.round(vuex_user.balance)"></uv-cell>
				</uv-cell-group>
				<!-- <uv-row class="classification" customStyle="" justify="space-between">
					<view class="demoItem bg-purple-light">
						<uv-row justify="space-between" customStyle="margin-bottom:10px">
							<uv-text text="邀请/人"></uv-text>
							<uv-text :text="vuex_user.teamCount"></uv-text>
							<uv-icon name="arrow-right"></uv-icon>
						</uv-row>
						<uv-row justify="space-between" customStyle="margin-bottom:10px">
							<uv-text text="收益/元"></uv-text>
							<uv-text :text="vuex_user.totalMoney"></uv-text>
							<uv-icon name="arrow-right"></uv-icon>
						</uv-row>
						<uv-button class="invite" :text="'邀 请'" shape="circle"
							@click="routed('/pages/my/invite')"></uv-button>
					</view>
					<view class="demoItem bg-purple">
						<uv-row justify="space-between" customStyle="margin-bottom:10px">
							<uv-text text="开通会员"></uv-text>
							<uv-icon name="arrow-right"></uv-icon>
						</uv-row>
						<uv-row justify="center" customStyle="margin-bottom:10px">
							<uv-text customStyle="margin:0px" align="center" text="开通会员"></uv-text>
						</uv-row>
						<uv-button class="invite" :text="'充 值'" type="error" shape="circle"
							@click="routed(rechargeUrl)"></uv-button>
					</view>
				</uv-row> -->
				<uv-cell-group customStyle="">
					<uv-cell v-for="(item,index) in baseList" :key="index" :size="'40'" :icon="item.name"
						:title="item.title" :value="item.value" isLink :url="item.url?item.url:''"
						@click="item.click?groupClick(item.click):''"></uv-cell>
				</uv-cell-group>
			</view>
		</el-container>
		<uv-text :text="fill" style="opacity: 0;height: 1px;" lines="1"></uv-text>
		<uv-toast ref="toast"></uv-toast>
		<tabbars :prop-value="4"></tabbars>
	</view>
</template>

<script>
	// 导入组件
	import avatar from './tabBar/avatar';
	import tabbars from '@/components/tabbar/tabbar';
	import {
		logout,
		getUser,
	} from '@/common/api.js';
	import headers from '@/components/header/header.vue';
	import config from '@/common/config.js';
	import asides from '@/components/aside/aside.vue';
	export default {
		components: {
			// 注册组件
			tabbars,
			avatar,
			headers,
			asides
		},
		props: {
			heads: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				scrollTop: 0,
				rechargeUrl: config.rechargeUrl,
				fill: config.fill,
				asideW: 60,
				aside: false
			}
		},
		computed: {
			baseList() {
				let list = [
					// {
					// 	name: 'lock',
					// value:'',
					// 	title: '隐私政策'
					// }, 
					{
						name: 'lock',
						value: '',
						title: '充值',
						url: '/pages/my/recharge'
					},
					{
						name: 'lock',
						value: '',
						title: '邀请',
						url: '/pages/my/invite'
					},
					{
						name: 'star',
						title: '收藏记录',
						value: '',
						url: '/pages/my/collection'
					},
					{
						name: 'star',
						title: '作品记录',
						value: '',
						url: '/pages/my/works'
					},
					{
						name: 'star',
						title: '消费记录',
						value: '',
						url: '/pages/my/record'
					},
					{
						name: 'photo',
						value: '',
						title: '分销系统',
						url: this.vuex_user.teamCount > 0 ? '/pages/my/withdrawal' : '',
					},
					// {
					// 	name: 'lock',
					// 	value: '',
					// 	title: '会员计划'
					// },
					// {
					// 	name: 'lock',
					// 	title: '我的文章',
					// 	value: '',
					// 	url: '/pages/my/article'
					// },
					{
						name: 'star',
						value: '',
						title: '产品反馈',
						url: '/pages/my/feedback'
					},
					// {
					// 	name: 'star',
					// 	value: '',
					// 	title: '关于我们'
					// },
					{
						name: 'star',
						value: config.version,
						title: '更新App'
					},
					{
						name: 'star',
						value: '',
						title: '退出登录',
						click: 'logout'
					}
				];
				// 初始化请求配置
				if (process.env.NODE_ENV === 'development') {
					// 开发环境下的代码
					list.unshift({
						name: 'star',
						title: '测试充值完成',
						value: '',
						url: '/pages/my/recharge_finish'
					})
				} else if (process.env.NODE_ENV === 'production') {
					// 生产环境下的代码
				}

				return list;
			},
			memberAt() {
				if (this.vuex_user?.memberAt) {
					// return uni.$uv.date('2023-08-06', 'yyyy年mm月dd日 hh时MM分ss秒');
					return uni.$uv.date(new Date(this.vuex_user.memberAt).getTime(), 'yyyy-mm-dd hh:MM')
				} else {
					return uni.$uv.date(new Date().getTime(), 'yyyy-mm-dd hh:MM')
				}
			},
			state() {
				if (new Date(this.vuex_user.memberAt ? this.vuex_user.memberAt : null).getTime() > new Date().getTime()) {
					return '未过期';
				} else {
					return '已过期';
				}
			}
		},
		onLoad() {},
		mounted() {
			var that = this;
			if (!this.isPc) { // 针对桌面平台（Windows和Mac）
				this.aside = false;
				this.asideW = 0;
			}
			// this.routed('/pages/my/invite');
			getUser({
				custom: {
					auth: true,
					catch: false,
				}
			}).then(e => {
				that.$uv.vuex('vuex_user', e);
			}).catch(e => {})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// #ifdef APP-NVUE
			this.scrollTop = e.detail.scrollTop;
			// #endif
		},
		methods: {
			groupClick(e) {
				if (e == 'logout') {
					this.Logout()
				} else {
					// uni.$uv.route({
					// 	url: '/pages/webview/webview?url=' + encodeURIComponent(e),
					// })
				}
			},
			Logout() {
				var that = this;
				that.$refs.toast.show({
					message: "退出登录中..."
				});
				logout({}, {
					custom: {
						auth: true,
						catch: false,
					}
				}).then(e => {
					that.$uv.vuex('vuex_user', {});
					that.$uv.vuex('vuex_token', '');
					that.$uv.vuex('refreshToken', '');
					// 显示 Toast
					uni.$uv.route({
						url: config.loginUrl,
						// type: 'reLaunch'
						params: {
							retu: '/',
						}
					})
				}).catch(e => {
					console.log(e);
				})
			},
			routed(url, e = '') {
				console.log('routed', url)
				uni.$uv.route({
					url: url,
					intercept(params, next) {
						uni.showLoading({
							title: '等待中...'
						})
						next(true);
					}
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	.my-index {
		// width: calc(100% - 20px);
		padding: 0px;
		// background-color: aliceblue;
		margin: 0px;
		border-radius: 5px;
		overflow: hidden;

		.my-index_content {
			padding: 10px;
			border: 1px solid #eeeeee;
			margin: 5px;
			border-radius: 6px;

			.number-layout {
				font-weight: bold;
			}

			.text-layout {
				color: #9B9B9B;
			}

			.classification {
				margin-top: 10px;

				.demoItem {
					width: 42%;
					height: 40%;
					padding: 10px;
					border-radius: 10px;

					.invite {
						margin-top: 10px;
						font-weight: bold;
					}
				}
			}

			.uv-cell-group {
				margin-top: 10px;
				background-color: #ffffff;
			}
		}
	}

	.demo-layout {
		// height: 25px;
		border-radius: 4px;
	}

	.bg-purple {
		background: #CED7E1;
	}

	.bg-purple-light {
		background: #e5e9f2;
	}

	.bg-purple-dark {
		background: #99a9bf;
	}

	.Unexpired {
		color: #DDDDDD;
		font-weight: bold;
	}

	.overdue {
		color: #F56C6C;
		font-weight: bold;
	}
</style>